<template>
	<el-pagination
		v-show="total > 0"
		:background="background"
		v-model:current-page="currentPage"
		v-model:page-size="pageSize"
		:layout="layout"
		:page-sizes="pageSizes"
		:pager-count="pagerCount"
		:total="total"
        :small="small"
		v-bind="$attrs"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	/>
</template>

<script setup lang="ts">
const emit = defineEmits()
const props = defineProps({
	pagerCount: {
		type: Number,
		default: 8,
	},
	total: {
		required: true,
		type: Number,
	},
	page: {
		type: Number,
		default: 1,
	},
	limit: {
		type: Number,
		default: 10,
	},
	pageSizes: {
		type: Array,
		default() {
			return [10, 20, 30, 50]
		},
	},
	layout: {
		type: String,
		default: 'total, sizes, prev, pager, next, jumper',
	},
	background: {
		type: Boolean,
		default: false,
	},
    small: {
        type: Boolean,
        default: false,
    },
})

const { pagerCount, total, page, pageSizes, layout, background, small } = toRefs(props)

const currentPage = computed({
	get() {
		return props.page
	},
	set(val) {
		emit('update:page', val)
	},
})

// 计算当前page
const pageSize = computed({
	get() {
		return props.limit
	},
	set(val) {
		emit('update:limit', val)
	},
})

// 切换size
const handleSizeChange = (val) => {
	emit('pagination', { page: currentPage, limt: val })
}

// 切换page
const handleCurrentChange = (val) => {
	emit('pagination', { page: val, limt: pageSize })
}
</script>

<style></style>
